import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../common/utils.dart';
import '../controllers/video_related_controller.dart';
import 'share_bottom_sheet.dart';
import 'type_writer_text.dart';

class VideoRelatedListView extends StatelessWidget {
  final int relateId;
  final Function(String) onItemClick;

  const VideoRelatedListView({super.key, required this.relateId, required this.onItemClick});

  _onShare() {
    Get.bottomSheet(
      barrierColor: Colors.black12,
      ShareBottomSheet(),
    );
  }

  _buildBottomItem() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                Icon(
                  size: 24,
                  Icons.thumb_up_off_alt,
                  color: Colors.grey[400],
                ),
                Text(
                  "12",
                  style: TextStyle(fontSize: 13, color: Colors.grey[400]),
                ),
              ],
            ),
            Column(
              children: [
                Icon(
                  size: 24,
                  Icons.star_border,
                  color: Colors.grey[400],
                ),
                Text(
                  "收藏",
                  style: TextStyle(fontSize: 13, color: Colors.grey[400]),
                ),
              ],
            ),
            Column(
              children: [
                Icon(
                  size: 24,
                  CupertinoIcons.chat_bubble,
                  color: Colors.grey[400],
                ),
                Text(
                  "56",
                  style: TextStyle(fontSize: 13, color: Colors.grey[400]),
                ),
              ],
            ),
            Column(
              children: [
                Icon(
                  size: 24,
                  Icons.download,
                  color: Colors.grey[400],
                ),
                Text(
                  "56",
                  style: TextStyle(fontSize: 13, color: Colors.grey[400]),
                ),
              ],
            ),
            GestureDetector(
              child: Column(
                children: [
                  Icon(
                    size: 24,
                    Icons.share,
                    color: Colors.grey[400],
                  ),
                  Text(
                    "分享",
                    style: TextStyle(fontSize: 13, color: Colors.grey[400]),
                  ),
                ],
              ),
              onTap: () {
                _onShare();
              },
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Divider(
          height: 1,
          color: Colors.grey[100],
        )
      ],
    );
  }

  _buildListViewHeader(VideoRelatedController controller) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: 10),
            child: TypewriterText(
              text: controller.videoInfo.value?.video.title ?? '',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              typingDuration: const Duration(milliseconds: 5),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: Text(
              "#${isEmpty(controller.videoInfo.value?.video.titlePgc ?? '') ? (controller.videoInfo.value?.category?.name ?? '') : (controller.videoInfo.value?.video.titlePgc ?? '')}",
              style: TextStyle(color: Colors.black45, fontSize: 15),
            ),
          ),
          TypewriterText(
            text: controller.videoInfo.value?.video.descriptionEditor ?? '',
            typingDuration: const Duration(milliseconds: 5),
            style: TextStyle(fontSize: 14, color: Colors.black87),
          ),
          if (!isEmpty((controller.videoInfo.value?.realLocation ?? '')))
            Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                "发布于 ${controller.videoInfo.value?.realLocation}",
                style: TextStyle(color: Colors.black26, fontSize: 12),
              ),
            ),
          SizedBox(height: 15),
          _buildBottomItem(),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(VideoRelatedController(relateId));

    return Obx(() {
      return CustomScrollView(
        controller: controller.scrollController,
        slivers: [
          SliverToBoxAdapter(
            child: controller.videoInfo.value == null ? SizedBox.shrink() : _buildListViewHeader(controller),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (c, index) {
                final item = controller.videoList[index];
                return GestureDetector(
                  child: Container(
                    color: Colors.white,
                    margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                    child: Column(
                      children: [
                        Row(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: CachedNetworkImage(
                                fit: BoxFit.cover,
                                imageUrl: item.data?.author?.icon ?? '',
                                width: 40,
                                height: 40,
                              ),
                            ),
                            Expanded(
                              child: Padding(
                                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      item.data?.author?.name ?? '',
                                      style: TextStyle(fontSize: 18),
                                    ),
                                    Text(
                                      item.data?.author?.description ?? '',
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        fontSize: 14,
                                        color: Colors.black.withOpacity(.5),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                        Stack(
                          children: [
                            CachedNetworkImage(
                              width: double.infinity,
                              height: 200,
                              fit: BoxFit.cover,
                              imageUrl: item.data?.cover?.feed ?? '',
                              placeholder: (context, url) => Image.asset(
                                "assets/images/placeholder.png",
                                fit: BoxFit.cover,
                              ),
                            ),
                            Positioned(
                              left: 0,
                              top: 0,
                              child: Container(
                                decoration: BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.only(
                                    bottomRight: Radius.circular(16),
                                  ),
                                ),
                                width: 46,
                                height: 22,
                                child: Padding(
                                  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 1),
                                  child: Text(
                                    item.data?.category ?? '',
                                    style: TextStyle(color: Colors.white, fontSize: 13),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  onTap: () {
                    onItemClick(item.data!.playUrl ?? '');
                    controller.id.value = item.data?.id ?? 0;
                    controller.loadData();
                    controller.scrollToTop();
                  },
                );
              },
              childCount: controller.videoList.length,
            ),
          ),
        ],
      );
    });
  }
}
